<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1000px">
			<el-form :model="state.queryParams" ref="queryFormRef" inline>
        <el-form-item label="商品名称" prop="goods_title">
					<el-input v-model="state.queryParams.goods_title" clearable placeholder="请输入商品名称" />
				</el-form-item>
				<el-form-item label="账单日期" prop="keyword">
					<el-date-picker
						v-model="state.queryParams.keyword"
						type="date"
						placeholder="请选择账单日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
      <el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="商品名称" align="center" prop="goods_title" />
				<el-table-column label="商品信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								商品编号：{{ row.goods_id }}<br />
								商品规格：{{ row.option_name }}<br />
								商品类型：{{ row.goods_type === 1 ? '普通商品' : '礼品商品' }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="关联供应商" align="center" prop="supplier_name" width="100" />
				<el-table-column label="付款订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ row.order_total_amt }}<br />
								订单数：{{ row.order_total_num }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="已关闭订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ floatSub(row.order_total_amt, row.real_order_total_amt) }}<br />
								订单数：{{ floatSub(row.order_total_num, row.real_order_total_num) }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="有效订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ row.real_order_total_amt }}<br />
								订单数：{{ row.real_order_total_num }}<br />
								货款：{{ row.supplier_cost }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="平台服务费" align="center" prop="service_amt" />
				<el-table-column label="佣金信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								铜牌佣金：{{ row.agent_amt1 }}<br />
								银牌佣金：{{ row.agent_amt2 }}<br />
								金牌佣金：{{ row.agent_amt3 }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="培养佣金信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								银牌培养佣金：{{ row.train_amt4 }}<br />
								金牌培养佣金：{{ row.train_amt5 }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
			</el-table>
      <PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue';
import { statisticsApi } from '/@/api';
import { floatSub } from '/@/utils/dictionary';

const StatisticsApi = statisticsApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	queryParams: {
    goods_title: '',
		keyword: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
  defaultTime: '',
});
const queryFormRef = ref();

/********** 触发事件 **********/
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
  state.queryParams.keyword = state.defaultTime;
	nextTick(() => {
		onQuery();
	})
	
};
/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `商品统计`;
  state.defaultTime = row.date;
  state.queryParams.keyword = row.date;
  onQuery()
};
// 刷新列表
const getList = () => {
	state.loading = true;
	_goodsStatistics(state.queryParams)
};
/********** 网络请求 **********/
// 商品统计
const _goodsStatistics = (params: Object) => {
	StatisticsApi.goodsStatistics(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
}

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
